{% extends "leftmenutemplate.html" %}

{% block content %}
    <style>
        .layui-row{
            margin-top: 10px;
        }
        .table-box{
            border: 1px solid rgba(166,166,166, 0.4);
            border-radius: 10px;
            padding: 10px 10px;
        }
        .layui-table-tool{
            display: none;
        }
        .input-search{
            width: 200px;
            float: left;
            margin-right: 20px;
        }
    </style>
    <div class="layui-row" style="height: 100px">

    </div>

    <div class="layui-row table-box">
        <div>
            <input type="text" id="shop_name" placeholder="店铺搜索" autocomplete="off" class="layui-input input-search">
            <input type="text" id="seller_sku" placeholder="店铺SKU" autocomplete="off" class="layui-input input-search">
            <button type="button" class="layui-btn  layui-btn-normal" onclick="start_search()">查询</button>
        </div>
        <script type="text/html" id="toolbar">
            <div><button type="button" id="search_btn" lay-event="search" >开始查询</button></div>
        </script>
        <table id="delivery_acceptance_diff" lay-filter="delivery_acceptance_diff_table"></table>
    </div>

     <script type="text/html" id="refund_case">
        {% verbatim %}
            <a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-normal" onclick="show_refund_case({{ d.id }})">申诉详情</a>
        {% endverbatim %}
    </script>

    <script>
        layui.use(['table'], function(){
            table = layui.table;
            table.render({
                elem: '#delivery_acceptance_diff',
                url: '/pages/table/delivery_acceptance_diff/', //数据接口
                where: { //设定异步数据接口的额外参数
                    shop_name: '',
                    seller_sku: '',
                },
                limit: 15,
                toolbar: '#toolbar', //绑定工具条
                page: true, //开启分页
                cols: [[ //表头
                    {field: 'shop_name', title: '店铺名称'},
                    {field: 'seller_sku', title: '店铺SKU'},
                    {field: 'site', title: '站点'},
                    {field: 'shipment_id', title: '发货单号'},
                    {#{field: 'fulfillment_fee_revise', title: '修正后尾程', width:100},#}
                    {field: 'case_id', title: 'Case ID',  edit: 'text'},
                    {field: 'id', title: '申诉详情', templet: '#refund_case', width:100},
                    {field: 'deal_status', title: '状态'},
                ]]
            });
             // 监听工具条事件
            table.on('toolbar(delivery_acceptance_diff_table)', function(obj){
                var shop_name = $('#shop_name').val()|| '';
                var seller_sku = $('#seller_sku').val() || '';
                 switch(obj.event){
                    case 'search':
                        table.reload('delivery_acceptance_diff', {
                            where: { //设定异步数据接口的额外参数
                                shop_name: shop_name,
                                seller_sku: seller_sku,
                            },
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    break;
                }
            });
            //监听单元格编辑
            table.on('edit(delivery_acceptance_diff_table)', function(obj){
                $.ajax({
                    url: "/pages/update_caseid/",
                    type: "POST",
                    dataType: "json",
                    data: {
                        datas: JSON.stringify({"id": obj.data.id, "case_id": obj.value}),
                    },
                    //async: false,
                    success: function(result) {
                        if (result.code == '1') {
                            layer.msg('填写成功！', {
                                time: 800
                            });
                        } else {
                            layer.msg('填写失败！', {
                                icon: 2,
                                time: 2000
                            });
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert('错误信息：' + XMLHttpRequest.responseText); //获取的信息即是异常中的Message
                    }
                });
            });
        });

        function start_search() {
            $('#search_btn').click();
        }
        
        function show_refund_case(data_id) {
            {#展示case模板数据#}
            layer.config({
                    extend: 'myskin/style.css',
                });
            layer.open({
                    type: 2,
                    title: "申诉详情",
                    offset: 'auto',
                    area: ['50%', '60%'],
                    shade: [0.8, '#393D49'],
                    shadeClose: true,
                    move: false,
                    resize : false,
                    content: "/pages/show_refund_case/?data_id=" + data_id,
                    skin: 'mypop-ups',          //仅限于单个模态框的使用
                });
        }
    </script>
{% endblock content %}